<template>
<!-- 不同专业的专家列表 -->
<!-- 默认为web  此页面-->
  <div>
    <t-space direction="vertical">
      <t-row :gutter="[16, 24]">
        <t-col v-for="i in 2" :key="i" :span="4" >
          <t-card :data-index='i' bordered  hover-shadow :style="{ padding:0 }" >
            <div class="whole" @click="toPage(i)">
              <div class="left">
                <img class="avatar" src="https://tdesign.gtimg.com/site/avatar-boy.jpg" alt="">
                <span>可咨询</span>
              </div>
              <div class="right">
                <div class="top">
                  <span>xxxxxxxxxxx</span>
                  <span>xxxxxxxxxxx</span>
                  <span>xxxxxxxxxxx</span>
                </div>
                <span class="foot" title="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx123">xxxxxxx
                  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxz
                  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
              </div>
            </div>
          </t-card>
        </t-col>
      </t-row>
    </t-space>
  </div>
</template>

<script>

export default {
  
  methods:{
    toPage(index){
      var str = `/detail`
      this.$router.push(str)
    }
  }
}
</script>

<style lang='less' scoped >
.whole{
  cursor: pointer;
  height: 100%;
  display: flex;
  justify-content: space-around;
  .left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    // background-color: aqua;
    
    span{
      // width: 50px;
      display: block;
      width: 50px;
      border-radius: 10%;
      // margin: 0 auto;
      // text-align: center;
      background-color: #393cff6b;
      color: white;
      font-size: 13px;

    }
    .avatar{
      // float: left;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      /* display: block; */
    }
  }

  .right{
    margin-left: 10px;
    // height: 100%;
    width: 80%;
    // background-color: antiquewhite;
    text-align: left;
    .top{
      border-bottom: 1px solid rgb(206, 206, 206);
      span{
        display: block;
      }
    }
    .foot{
      display: block;
      // height: 100%;
      overflow:hidden;
      text-overflow: ellipsis;
      word-wrap: normal;
      // width: 100%;
    }
  }
}

</style>